<style type="text/css">
	#video{margin:0 auto;}
	.bg-white{background: white;}
	.content{margin: 20px;padding: 10px}
	.right h2{margin-top: 20px}
	.right .info div{margin-bottom: 10px;color: #585858}
	.other-film-item{cursor:pointer;}
	.other-film-item:hover{color: #777777;}
	.other-film-item-playing{color: #fd7a7a;}
	.play-tool{height: 20px;margin-top: 10px;}
	.a-data-path{cursor:pointer;}
</style>
<script type="text/javascript" src="/static/ckplayer/ckplayer.js" charset="utf-8" data-name="ckplayer"></script>
<div class="content bg-white">
	<h2 class="title">--</h2>
	<hr class="layui-bg-red">

	<div class="layui-row layui-col-space30">
		<div class="layui-col-md9">
			<div class="video bg-white">
				<div id="video" style="width:100%;height:calc(100% - 150px);"></div>
			</div>
			<hr>
			<div class="layui-form play-tool" >
				<input type="checkbox" lay-filter="auto_play" id="auto_play"  title="自动播放" lay-skin="primary">
			</div>
		</div>
		<div class="layui-col-md3">
			<div class="right">
				<h2>视频信息</h2>
				<hr>
				<div class="info">
					<div>--：--</div>
					<div>--：--</div>
					<div>--：--</div>
				</div>
				<div class="file-tool">
				
				</div>
				
				<h2>目录全部视频</h2>
				<hr>
				<div class="other-film">
					<!-- <div>
						内容.mp4
					</div> -->
				</div>
			</div>
		</div>
	</div>	
</div>



<script type="text/javascript">
	layui.use(['jquery','form'],function(){
		var file_id=app.parseUrl(app.getUrl()).params.file_id,info_html=''
		var auto_play= app.parseUrl(app.getUrl()).params.auto_play;
		var $=layui.jquery, form=layui.form
		var eInfo=$('.info'),eTitle=$('.content .title');

		// 获取在线地址
		function getOnlineAddress(file_id,extend_name){
			return '/source/getFile/' + file_id + '/' + file_id + '.' + extend_name;
			// return '/source/file?file_id=' + file_id ;
		}

		var videoObject = {
			container: '#video',//“#”代表容器的ID，“.”或“”代表容器的class
			variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
			flashplayer:false,//如果强制使用flashplayer则设置成true
			// preview:true,
			// style:{logo:false},
			video: ""
		}
		
		
		form.render();

		

		start(file_id);
		
		function start(file_id){
			// 获取视频信息
			app.ajaxPost('/api/file/getInfoByFileId', {'fileId': file_id }, function (data) {
				eTitle.html(data.data.file_name)
				let extendName=app.getExtendName(data.data.file_name)
				videoObject.video= getOnlineAddress(file_id, extendName)
				// console.log(videoObject.video);
				
				// console.log("文件信息",data)
				var info_html="";
				info_html += '<div>文件大小：' + app.bytesToSize(data.data.size) + '</div>'
				info_html += '<div data-path="' + data.data.path + '">文件目录：<a class="a-data-path" title="新窗口查看目录文件">' + data.data.path + '</a></div>'
				info_html += '<div>更新时间：' + data.data.update_time + '</div>'
				eInfo.html(info_html)
				$("title").html(data.data.file_name + ' - 在线播放');
				$('.a-data-path').click(function(){
					app.open('/index/file_list?path=' + $(this).parent().data('path'));
				})

				// 获取目录所有视频
				app.ajaxPost('/api/file/getListByType', {'path': data.data.path ,"types":["mp4","flv"]}, function (dataList) {
					$('.other-film').html('');
					for (let i = 0; i < dataList.data.length; i++) {
						const element = dataList.data[i];
						var html;
						var img = '<img style="width: 1.5rem;height:1.5rem" src="/static/layui_extends/fileManager/img/' + app.getExtendName(element.file_name) + '.png" onerror = "this.src=\'/static/layui_extends/fileManager/img/none.png\'" >'
						if (element.id == file_id) {
							html = '<div class="layui-inline" style="width:calc(100% - 1.5rem)"><div class="other-film-item other-film-item-playing layui-elip"  title="' + element.file_name + '">[播放中]' + element.file_name + '</div></div>';
						} else {
							html = '<div class="layui-inline" style="width:calc(100% - 1.5rem)"><div class="other-film-item layui-elip" data-file_id="' + element.id + '" title="' + element.file_name + '">' + element.file_name + '</div></div>';
						}

						html = '<div style="height:40px;line-height:40px">' + img + html + '</div>';
						$('.other-film').append(html);
					}

					// 监听其他视频被点击跳转
					$('.other-film-item').click(function () {
						console.log($(this).data('file_id'));
						if ($(this).data('file_id')) {
							// 自动播放链接
							if (auto_play == 1) {
								app.go('/onlineplay/video?file_id=' + $(this).data('file_id') + '&auto_play=1')
							} else {
								app.go('/onlineplay/video?file_id=' + $(this).data('file_id'))
							}

						}
					})

				})
			
				startPlay()
			})
			app.runTpl('file_tool', { file_id: file_id, elem: '.file-tool' })
		}

		function startPlay(){
			var player = new ckplayer(videoObject);

			// 是否开启自动播放，开启将等待加载完成触发播放
			if (auto_play == 1) {
				$('#auto_play').attr('checked', 1);
				layer.msg('已开启自动播放');
				// 加载完成
				player.addListener('loadedmetadata', function () {
					player.videoPlay();//自动播放视频
				});
			}

			// 监听视频播放完成，如果开启自动播放将自动播放下一个视频
			player.addListener('ended', function () {
				// 获取下一个节点的视频
				var nextElem = $('.other-film-item-playing').parent().parent().next().children().children()
				if (auto_play == 1 && nextElem.text()) {
					layer.msg('播放完成,即将播放' + nextElem.text());
					player.newVideo({ video: getOnlineAddress(nextElem.data('file_id')) });
					start(nextElem.data('file_id'));
					// app.go('/onlineplay/video?file_id=' + nextElem.data('file_id') + '&auto_play=1')
				}
			});
		}
		

		// 监听自动播放按钮
		form.on('checkbox(auto_play)', function (data) {
			if(data.elem.checked==true){
				app.go('/onlineplay/video?file_id=' + file_id+'&auto_play=1')
			}else{
				app.go('/onlineplay/video?file_id=' + file_id)
			}
		});
	})
	
</script>
